<template>
  <div class="activity">
    <index-nav></index-nav>
    <!-- 轮播图 开始 -->
    <div class="lb">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        :style="{ height: h }"
        :speed="200"
      >
        <van-swipe-item>
          <img src="../assets/activity/lb1.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/activity/lb2.jpg" alt="" />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/activity/lb3.jpg" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 轮播图 结束 -->
    <!-- 我的活动 开始 -->
    <div class="myactivity">
      <img src="../assets/activity/jb.png" />
      <h5>我的活动</h5>
      <span>
        <router-link to="/join">查看我的活动 &gt;</router-link>
      </span>
    </div>
    <!-- 我的活动 结束 -->
    <h3>月度挑战赛</h3>
    <router-link to="/Eventdetails">
      <div v-if="this.activity.length !== 0">
        <div class="content" v-for="(item, i) in activity" :key="i">
          <div class="left">
            <img :src="require(`../assets/activity/${item.src}`)" />
          </div>
          <!-- <div class="left"><img src="../assets/activity/list1.jpg" /></div> -->
          <div class="right">
            <p class="title">{{ item.title }}</p>
            <p class="sign_up">{{ item.a_time }}</p>
            <p class="people">{{ item.people }}</p>
          </div>
        </div>
      </div>
    </router-link>
    <!-- <div class="content">
      <div class="left"><img src="../assets/activity/list1.jpg" /></div>
      <div class="right">
        <p class="title">守护非遗产力量挑战赛 | 年画出新</p>
        <p class="sign_up">报名时间：07.13-08.22</p>
        <p class="people">1,628人已参与</p>
      </div>
    </div>

    <div class="content">
      <div class="left"><img src="../assets/activity/list3.jpg" /></div>
      <div class="right">
        <p class="title">自游迪士尼联名第一弹|运动得唐老鸭徽章</p>
        <p class="sign_up">报名时间：06.18-07.28</p>
        <p class="people">3,628人已参与</p>
      </div>
    </div> -->
    <!-- 底线 -->
    <div class="bottom">······已经到底了······</div>
    <tabbar></tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      h: "230px",
      //接收activity内的内容
      activity: [],
    };
  },
  methods: {
    //挑战
    loadActivity() {
      this.axios.get(`/activity`).then((result) => {
        this.activity = result.data.data;
        // 一开始判断每一个商品的选中状态，是否选中全选按钮
      });
    },
    // 初始化轮播图
    initSwipe() {
      let picWidth = 600; // 图片宽
      let picHeight = 300; // 图片高
      let screenWidth = window.screen.width; // 屏幕宽
      let swipeHeight = Math.floor((picHeight * screenWidth) / picWidth) + "px";
      this.h = swipeHeight;
    },
  },
  watch: {},
  mounted() {
    // 初始化轮播图
    this.initSwipe();
    this.loadActivity();
  },
};
</script>

<style>
/* 轮播 */
.activity .lb img {
  width: 90%;
  margin: 0 auto;
  display: block;
  margin-top: 60px;
  border-radius: 10px;
}
/* 我的活动 */
.activity .myactivity {
  width: 90%;
  height: 50px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  background-color: #eee;
  border-radius: 10px;
  line-height: 50px;
  padding: 0 10px;
  align-items: center;
}
.activity .myactivity > img {
  width: 35px;
  height: 40px;
}
.activity .myactivity > h5 {
  width: 200px;
  text-align: left;
  color: #333;
}
.activity .myactivity > span {
  font-family: "宋体";
}
.activity .myactivity > span > a {
  color: #999;
}
.activity .content {
  width: 90%;
  margin: 0 auto;
  margin-top: 20px;
  display: flex;
}
.activity > h3 {
  margin-top: 20px;
  text-align: left;
  padding: 0 10px;
}
.activity .left {
  width: 45%;
}
.activity .right {
  width: 65%;
  margin-left: 10px;
}
.activity .left > img {
  display: block;
  width: 100%;
  border-radius: 10px;
}
.activity .right p {
  line-height: 20px;
  text-align: left;
}
.activity .title {
  font-weight: 600;
  font-size: 14px;
  color: #333;
}
.activity .sign_up,
.activity .people {
  font-size: 12px;
  color: #999;
}
.activity .bottom {
  color: #aaa;
  margin-top: 20px;
  padding-bottom: 100px;
}
</style>
